<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="solution.css">

</head>

<body>
    <div class="header">
        <div class="header-icn">
            <ul class="header-right">
                <li><img src="img/iphon_03.png" alt=""></li>
                <li>0531-6065218</li>
                <li><img src="img/love_03.jpg" alt=""></li>
                <li><img src="img/love_05.jpg" alt=""></li>
                <li><img src="img/love_07.jpg" alt=""></li>
                <li><img src="img/love_09.png" alt=""></li>
            </ul>
            <ul class=" header-left">
                <li> <a href="index.html">网站首页</a> </li>
                <li> <a href="solution.html">传悦资源</a> </li>
                <li> <a href="case.html">传悦案例</a> </li>
                <li> <a href="">传悦服务</a> </li>
                <li><a href="solution.html">解决方案</a> </li>
                <li> <a href="">需求提交</a> </li>
            </ul>
            <div class="chuanyue"><img src="img/chuanyue.png" alt="">
                <p>网络全案营销服务提供商</p>
            </div>
        </div>
    </div>
    <div class="banner">

        <p>VIEWPOINT 传悦观点</p>
        <div class="banner-bot">
            <div class="banner-bot-icn">
                网站首页>传悦观点
            </div>
        </div>
    </div>
    <main>
        <div id="template" class="template">
            <div class="template-lef">
                <img class="new" src="img/new.png" alt="" style="display: none;">
                <p class="year">2013-09</p>
                <h3 class="day">27</h3>
            </div>
            <div class="template-rig">
                <div class="details">
                    <img class="deteimg" src="img/detelphone.png" alt="">
                    <div class="text">
                        <h3 class="head">行业合作专题，针对旅游行业的资源打散再重组 </h3>
                        <p class="label">标签： 资源整合 旅游行业 行业专题 </p>
                        <p class="synopsis">根据游客不同阶段的不同需求，已然可相应引导出不同的媒介资源，串联起所有需求，在不同阶段营造出不同的传播策略，达到既全 面，但是又有针对性的深层次投放，这是需要基于对目标用户有一定研究，同时结合第三方客观数据去完成的专业投放。 </p>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <div class="page">
        <ul>
            <li>
                <</li>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>></li>
        </ul>
    </div>
    <footer>
        <div class="foorer-icn">
            <div class="foorer-left">
                <img src="img/logo.png" alt="">
            </div>
            <div class="foorer-right">
                <ul class="right">
                    <li>关于传悦</li>
                    <li>新闻动态</li>
                    <li>传悦观点</li>
                    <li>联系传悦</li>
                    <li>付款账户</li>
                    <li>加入传悦</li>
                </ul>
                <ul class="left">
                    <li>Copyright</li>
                    <li>创梦网络科技有限责任公司</li>
                    <li>||</li>
                    <li>传悦Chnyoo.cn All Rights Reserved</li>
                    <li>京ICP备12005221号</li>
                </ul>

            </div>
        </div>

    </footer>


</body>
<script>
    let otemplate = document.querySelector("#template")
    let omain = document.querySelector("main")




    function solution(data) {
        data.forEach(function(item, i) {
            let odiv = otemplate.cloneNode(true);
            odiv.id = "";
            omain.appendChild(odiv)
            if (i == 0) {
                odiv.querySelector(".new").style.display = "block";
            }
            odiv.querySelector(".deteimg").setAttribute("sid", item.id)
            console.log(odiv.getAttribute("sid"))

            odiv.querySelector(".deteimg").src = item.imgsrc;
            console.log(odiv.querySelector("img").src)
            odiv.querySelector(".head").innerHTML = item.head;
            odiv.querySelector(".label").innerHTML = item.label;
            odiv.querySelector(".synopsis").innerHTML = item.synopsis;
            console.log(item.time)
            let index = item.time.indexOf("T")
            let time1 = item.time.substring(0, index);

            odiv.querySelector(".year").innerHTML = time1.split("-")[0] + "-" + time1.split("-")[01];
            odiv.querySelector(".day").innerHTML = time1.split("-")[2];
        })
    }

    let script = document.createElement("script");
    script.setAttribute("src", `http://10.35.164.194:81/solutionlist?callback=solution`);
    omain.appendChild(script)
        //点击跳转
    omain.onclick = function(evt) {
        let e = evt || event;
        let _this = e.target;
        if (_this.className === "deteimg") {
            // alert(1)
            let id = _this.getAttribute("sid")
            window.location.href = `solutionlist.html?id=${id}`
        }
    }
</script>

</html>